<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="the_div">
      <p>我是p标签</p>
      <h3>我是h3</h3>
      <h3>我是h3</h3>
      <h3>我是h3</h3>
      <a id="theA" href="#">我是一个a标签</a>
      <ul>
        <li>北京</li>
        <li>天津</li>
        <li>南京</li>
      </ul>
      <ol class="my_li">
        <li>大张</li>
        <li>大王</li>
        <li>大狗</li>
      </ol>
      <ul class="my_li">
        <li>小明</li>
        <li>小红</li>
        <li>小蓝</li>
      </ul>
    </div>

    <script>
      // 练习1. 通过id获取到a标签
      const a = document.querySelector('#theA')
      // console.log(a)

      // 练习2. 通过标签名 获取到所有h3标签, 并输出在控制台
      const h3 = document.querySelectorAll('h3')
      // console.log(h3)
      h3.forEach((item) => console.log(item))

      // 练习3. 通过querySelectAll() 获取所有的li标签
      const lis = document.querySelectorAll('li')
      // console.log(lis)
      for (let i = 0; i < lis.length; i++) {
        console.log(lis[i])
      }

      // 练习4. 通过querySelectAll() 获取所有小字开头的名字的li标签
      const lis2 = document.querySelectorAll('ul.my_li li')
      // console.log(lis2)
      lis2.forEach((item) => console.log(item))

      // 练习5. 给<li>小红</li> 内容改成小六，字体颜色变成红色
      const lis3 = document.querySelector('ul.my_li li:nth-child(2')
      // console.log(lis3)
      lis3.innerText = '小六'
      // console.log(lis3)
      lis3.style.color = 'red'

      // 练习6. 给<li>天津</li> 添加类名，样式修改背景色老绿
      const lis4 = document.querySelectorAll('li')
      for (let i = 0; i < lis4.length; i++) {
        console.log(lis4[i])
        if (i === 1) {
          lis4[i].classList.add('tj')
          lis4[i].style.backgroundColor = 'lawngreen'
        }
        console.log(lis4[i])
      }
    </script>
  </body>
</html>
